<template>
  <div class="app-container">
    <el-form ref="placeCodeForm" v-loading="formLoading" :rules="rules" :model="form" label-position="top">
      <el-row type="flex" :gutter="20">
        <el-col :span="24">
          <el-form-item label="乡镇、村、组" prop="groupId" style="width: 200px">
            <el-cascader v-loading="placeTypeLoading" v-model="form.groupId" placeholder="请选择乡镇、村、组"
                         :options="option"
                         :show-all-levels="false"
                         :props="{value:'id',label:'name',children:'child'}"
                         filterable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="姓名" prop="realName" style="width: 200px">
            <el-input v-model="form.realName" placeholder="请输入姓名" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="性别" prop="sex" style="width: 200px">
            <template>
              <el-select v-model="form.sex" clearable placeholder="请选择">
                <el-option
                  v-for="item in optionsSex"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20">
        <el-col :span="24">
          <el-form-item label="民族" prop="nationId" style="width: 200px">
            <template>
              <el-select v-model="form.nationId" clearable placeholder="请选择">
                <el-option
                  v-for="item in optionNation"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="学历" prop="educationId" style="width: 200px">
            <template>
              <el-select v-model="form.educationId" clearable placeholder="请选择">
                <el-option
                  v-for="item in educationOption"
                  :key="item.id"
                  :label="item.data"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="身份证号码" prop="idCard" style="width: 200px">
            <el-input v-model="form.idCard" placeholder="请输入身份证号码" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20">
        <el-col :span="24">
          <el-form-item label="手机号码" prop="mobile" style="width: 200px">
            <el-input v-model="form.mobile" placeholder="请输入手机号码" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="年龄（周岁）" prop="age" style="width: 200px">
            <el-input v-model="form.age" placeholder="请输入年龄" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="就业状态" prop="employment" style="width: 200px">
            <template>
              <el-select v-model="form.employment" clearable placeholder="请选择">
                <el-option
                  v-for="item in employment"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" v-if="form.employment==1">
        <el-col :span="24">
          <el-form-item label="从业类型" prop="practiceState" style="width: 200px">
            <template>
              <el-select v-model="form.practiceState" clearable placeholder="请选择">
                <el-option
                  v-for="item in practiceState"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="外出务工地点(城市)" prop="practiceAddress" style="width: 200px">
            <el-input v-model="form.practiceAddress" placeholder="请输入外出务工地点" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="从事工种" prop="workTypeId" style="width: 200px">
            <template>
              <el-select v-model="form.workTypeId" clearable placeholder="请选择">
                <el-option
                  v-for="item in jobProfession"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20">
        <el-col :span="24">
          <el-form-item label="是否有务工意愿" prop="wishWork" style="width: 200px">
            <template>
              <el-select v-model="form.wishWork" clearable placeholder="请选择">
                <el-option
                  v-for="item in is"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="form.wishWork==1">
          <el-form-item label="意愿务工地点" prop="wishPracticeAddress" style="width: 200px">
            <el-input v-model="form.wishPracticeAddress" placeholder="请输入意愿务工地点" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="form.wishWork==1">
          <el-form-item label="意愿务工工种" prop="wishWorkTypeId" style="width: 200px">
            <template>
              <el-select v-model="form.wishWorkTypeId" clearable placeholder="请选择">
                <el-option
                  v-for="item in jobProfession"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20">
        <el-col :span="24" style="width: 33%">
          <el-form-item label="是否有培训需求" prop="whetherTrain" style="width: 200px">
            <template>
              <el-select v-model="form.whetherTrain" clearable placeholder="请选择">
                <el-option
                  v-for="item in is"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="width: 50%" v-if="form.whetherTrain==1">
          <el-form-item label="意愿培训工种" prop="trainWorkTypeId" style="width: 200px">
            <template>
              <el-select v-model="form.trainWorkTypeId" clearable placeholder="请选择">
                <el-option
                  v-for="item in jobProfession"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20">
        <el-col :span="24">
          <el-form-item label="已持证名称" prop="certificateName" style="width: 200px">
            <el-input v-model="form.certificateName" placeholder="请输入已持证名称" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否退伍军人" prop="veteran" style="width: 200px">
            <template>
              <el-select v-model="form.veteran" clearable placeholder="请选择">
                <el-option
                  v-for="item in is"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否返乡农民工" prop="returnHome" style="width: 200px">
            <template>
              <el-select v-model="form.returnHome" clearable placeholder="请选择">
                <el-option
                  v-for="item in is"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注" prop="notes" >
            <el-input type="textarea" v-model="form.notes"  :rows="5"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {editTrainApi} from '@/api/trainCode'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {
  addQuestionnaireInvestigation,
  getEducationApi,
  getQuestionnaireConfig,
  getQuestionnaireInvestigationByIdApi
} from "@/api/QuestionnaireInvestigation";
import {idCardValidate} from "@/utils/idCardValidate";
import {insertAndUpdateNewsApi} from "@/api/placeCode";

export default {
  components: {Editor, Toolbar},
  name: 'PlaceCodeDetail',
  data() {
    return {
      editor: null,
      category: [],
      option:[],
      typeList:[],
      optionsSex: [{
        value: 1,
        label: '男'
      }, {
        value: 2,
        label: '女'
      }],
      optionNation: [],
      specialityList: [],
      mode: 'default',
      uploadUrl: process.env.VUE_APP_UPLOAD_API,
      dialogImageUrl: '',
      dialogVisible: false,
      form: {
        realName:'',
        sex:'',
        nationId:'',
        educationId:'',
        idCard:'',
        mobile:'',
        age:'',
        household:0,
        groupId:[],

        employment:'',
        practiceState:'',
        practiceAddress:'',
        workTypeId:'',
        wishWork:'',
        wishWorkTypeId:'',
        wishPracticeAddress:'',

        whetherTrain:'',
        trainWorkTypeId:'',
        certificateName:'',

        veteran:'',
        returnHome:'',
        notes:'',
      },
      rules: {
        realName: [{required: true, trigger: 'blur', message: '请输入姓名'}],
        sex: [{required: true, trigger: 'blur', message: '请选择性别'}],
        age: [{required: true, trigger: 'blur', message: '请输入年龄'}],
        idCard: [{required: true, trigger: 'blur', message: '请输入身份证号码'}],
        mobile: [{required: true, trigger: 'blur', message: '请输入手机号码'}],
        nationId: [{required: true, trigger: 'blur', message: '请选择民族'}],
        employment: [{required: true, trigger: 'blur', message: '请选择就业状态'}],
        wishWork: [{required: true, trigger: 'blur', message: '请选择是否有务工意愿'}],
        whetherTrain: [{required: true, trigger: 'blur', message: '请选择是否有培训需求'}],
        veteran: [{required: true, trigger: 'blur', message: '请选择是否退伍军人'}],
        returnHome: [{required: true, trigger: 'blur', message: '请选择是否返乡农民工'}],
        groupId: [{required: true, trigger: 'blur', message: '请选择所属乡镇村组'}],
      },
      formLoading: false,
      placeTypeLoading: true,
      sex:[{id:1,value:'男'},{id:2,value:'女'}],
      sexIndex:0,
      educationOption:[],
      age:[],
      ageIndex:0,

      nationId:[],
      nationIdIndex:0,

      educationId:[],
      educationIdIndex:0,

      township:[],

      employment:[{id:1,value:'已就业'},{id:2,value:'未就业'}],
      employmentIndex:0,

      practiceState:[{id:1,value:'务农(偶尔打零工)'},{id:2,value:'常年外出打工'}],
      practiceStateIndex:0,

      jobProfession:[],
      workTypeIdIndex:0,
      wishWorkTypeIdIndex:0,
      trainWorkTypeIdIndex:0,

      is:[{id:1,value:'是'},{id:2,value:'否'}],
      wishWorkIndex:0,
      whetherTrainIndex:0,
      veteranIndex:1,
      returnHomeIndex:1,
    }
  },
  props: ['id', 'closeDialog'],
  methods: {
    submit(){
      let rules=JSON.parse(JSON.stringify(this.rules));
      let form=JSON.parse(JSON.stringify(this.form))
      rules.idCard.validator=function(value,form,callback){
        const result=idCardValidate(value)
        if(!result.result){
          callback(result.msg)
        }
        callback();
      }
      rules.mobile.validator=function(value,form,callback){
        if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)){
          callback('请输入正确的手机号码');
        }
        callback()
      }
      form.groupId=form.groupId.join(',');

      if(form.employment==1){
        rules.practiceState=[{required: true, trigger: 'blur', message: '请选择从业类型'}]
        rules.workTypeId=[{required: true, trigger: 'blur', message: '请选择从事工种'}]
        if(form.practiceState==1){
          delete form.practiceAddress;
        }else{
          rules.practiceAddress=[{required: true, trigger: 'blur', message: '请输入外出务工地点'}]
        }
      }else{
        delete form.practiceState;
        delete form.practiceAddress;
        delete form.workTypeId;
      }

      if(form.wishWork==2){
        delete form.wishPracticeAddress
        delete form.wishWorkTypeId
      }else{
        rules.wishPracticeAddress=[{required: true, trigger: 'blur', message: '请输入意愿务工地点'}]
        rules.wishWorkTypeId=[{required: true, trigger: 'blur', message: '请选择意愿务工工种'}]
      }

      if(form.whetherTrain==2){
        delete form.trainWorkTypeId
      }else{
        rules.trainWorkTypeId=[{required: true, trigger: 'blur', message: '请选择意愿务工工种'}]
      }
      console.log(form)
      addQuestionnaireInvestigation(form).then((res) => {
        this.$message.success('保存成功');
        this.closeDialog(0);
      }).catch(() => {
        this.$message.error('保存失败');
      }).finally(() => {
        loading.close();
      })

    },
    getConfigType(type)
    {
      this.placeTypeLoading = true;
      getQuestionnaireConfig({type: type}).then((res) => {
        if(type ==1)
        {
          this.optionNation = res;
        }
        if(type ==2)
        {
          this.option = res;
        }
        if(type ==3)
        {
          this.jobProfession = res
        }
      }).finally(() => {
        this.placeTypeLoading = false;
      })
    },
    getEducation()
    {
      getEducationApi().then((res) => {
        this.educationOption = res
      }).finally(() => {
        this.tableConf.loading = false
      })
    },
    getDetail() {
      this.formLoading = true;
      getQuestionnaireInvestigationByIdApi({id: this.id}).then((res) => {
        this.form = res;
      }).finally(() => {
        this.formLoading = false;
      })
    },
  },
  mounted() {
    this.getEducation();
    this.getConfigType(1);
    this.getConfigType(2);
    this.getConfigType(3);
    if (this.id) {
      this.getDetail();
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },

}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #c5c5c5;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;

}
</style>
<style scoped>
/*
*让select撑开
*/
.el-select, .el-cascader {
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed #c5c5c5;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;

}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
